/*
1 点击 “+” 触发tap点击事件
  1.调用小程序内置的 选择图片的api
  2.点击确认 获取到图片的路径 存储是一个数组
  3.把图片路径 存到data的变量中
  4.页面就可以根据图片数组 进行循环渲染  在自定义组件渲染
2 点击 自定义图片 的组件
  1.获取被点击的元素索引
  2.获取 data中的图片数组
  3.根据索引 在数组中删除对应的图片
  4.把数组重新设置回data中
3 点击 提交
  1.获取文本域内容  类似 输入框的获取
    1.data中定义变量  表示文本域内容  
    2.文本域 绑定 输入事件 事件的触发的时候 把文本域的值给data
  2.对这些内容进行 合法性校验
  3.验证通过 获取用户选择的图片 上传到专门的接收图片的服务器wx有api 会返回图片外网的链接
    1.遍历图片数组
    2.挨个上传
    3.自己再维护图片数组 挨个存放 图片上传返回的外网的链接
  4.文本域 和 外网的图片路径 一起提交到服务器 （后台没有定义接口） 前端的模拟 不会真发送请求到后台
  5.清空当前页面所有内容
  6.返回上一页
*/

Page({
  data: {
     //父组件定义数据
     tabs:[
      {
        id:0,
        value:"体验问题",
        isActive:true
      },
      {
       id:1,
       value:"商品、商家投诉",
       isActive:false
     }
    ],
    chooseImags:[], //被选中的图片路径 数组
    textVal:""  //文本域的内容
  },
  // 全局 外网的图片的路径数组
  UploadImgs:[],

  //标题点击事件 从子组件传过来的
   handleTabsItemChange(e){
    // 1. 获取被点击的标题索引
    const {index} = e.detail
    // 2.修改源数组
    const {tabs} = this.data
    tabs.forEach((v,i)=> i=== index ? v.isActive = true : v.isActive = false);
    this.setData({
      tabs
    })
  },

  //点击 “+” 选择图片方法
  handleChooseImg(){
    // 1.调用小程序内置的选择图片的api
    wx.chooseImage({
      //同时选中的最多的图片数量
      count: 9,  
      //图片的格式 原图 压缩图
      sizeType: ['original','compressed'],
      //图片的来源 使用相册 相机
      sourceType: ['album','camera'],
      success: (result)=>{
        this.setData({
          // 图片数组 把新旧的图片 进行解构拼接  
          chooseImags:[...this.data.chooseImags,...result.tempFilePaths]
        })
      },
    });
  },

  //点击自定义组件的图片进行删除
  handleRemoveImg(e){
    //1.获取被点击的图片索引
    let index = e.currentTarget.dataset.index;
    //2.获取 data中的图片数组
    let chooseImags = this.data.chooseImags;
    //3.根据索引值进行删除对应的图片
    chooseImags.splice(index,1);
    //3.把数组重新设置回data中
    this.setData({
      chooseImags
    })
  },

  //文本域输入的事件
  handleTextInput(e){
    this.setData({
      textVal:e.detail.value
    })
  },

  //提交按钮的事件
  handleFormSubmit(){
     //1.获取文本域内容
     const {textVal,chooseImags} = this.data
     //2.合法性的验证
     if(!textVal.trim()){
        //不合法
        wx.showToast({
          title: '你输入的内容不合法,请重新输入!',
          icon: 'none',
          mask: true,
        });
        return;
     }
      // 弹窗提示正在等待的图片
      wx.showLoading({
        title: "正在上传中",
        mask: true,
      });
      //判断有没有需要上传的图片数组
      if (chooseImags.length != 0) {
         //有选择图片 就按流程走
         chooseImags.forEach((v,i)=>{
          //3.上传图片 到专门的图片服务器wx有api（会返回图片的外网链接） 
          //  上传文件的api 不支持 多个文件同时上传   方法:遍历数组 挨个上传
          wx.uploadFile({
            // 图片要上传到哪里
            url: 'https://images.ac.cn/Home/Index/UploadAction/', //新浪图床接口 
            // 被上传的文件的路径
            filePath: v,
            // 上传的文件名称 自定义（后台通过名称来获取文件）
            name: "file",
            // 请求过程中顺带的文本信息
            formData: {},
            success: (result)=>{
              console.log(result);
              let url = JSON.parse(result.data).url;  //把返回来的json格式路径转成js路径
              this.UploadImgs.push(url);   //往外网的图片的路径数组 添加图片路径
    
              // 所有的图片都上传完成才触发 提交请求
              if (i === chooseImags.lenght-1 ) {  //表示最后一张了
                // 关闭等待弹出
                wx.hideLoading();
                // 模拟提交请求   //异步请求
                console.log("把文本的内容和外网的图片数组 提交到后台中");
                // 提交成功了  重置页面内容 
                this.setData({
                  textVal:'', //文本域内容清空
                  chooseImags:[]  //选中的图片清空
                });
                // 返回上一个页面
                wx.navigateBack({
                  delta: 1
                });
              }
            },
        });
      })
      }else{
        //关闭弹窗
        wx.hideLoading();
        //没有图片，但是只要文本内容 要提交发送请求
        console.log("我只是提交了文本内容");
        // 弹窗提示成功
        wx.showToast({
          title: '提交成功',
          icon: 'success',
          mask: true,
        });
        setTimeout(()=>{
          wx.navigateBack({      //返回上一页
            delta: 1
          });
        },2000)
      }       
  }
})